<template>
	<view v-if="visible" class="fullscreen-modal-overlay" @touchmove.stop.prevent @touchstart="handleTouchStart"
		@touchend="handleTouchEnd">
		<view class="video-container">
			<!-- 选项 1: 如果DomVideoPlayer适合此场景，可以直接使用 -->
			<DomVideoPlayer ref="modalPlayer" :src="videoSrc" autoplay :controls="false" :muted="false"
				style="width: 100%; height: 100%;" @videoDidExitFullScreen="handleNativeExit" />
			<!-- 选项 2: 或者如果DomVideoPlayer对行内播放有过多特定逻辑，可以使用更简单的原生video标签 -->
			<!-- <video
				ref="modalPlayerNative"
				:src="videoSrc"
				autoplay
				controls
				style="width: 600rpx; height: 600rpx; object-fit: scale-down;"
				@ended="closeModal" 
			></video> -->

		</view>
		<view class="close-button" @click="closeModal">
			<u-icon name="close" color="#FFFFFF" size="28"></u-icon>
		</view>
	</view>
</template>

<script>
	// #ifdef APP-PLUS || H5
	import DomVideoPlayer from '@/components/DomVideoPlayer/DomVideoPlayer.vue'; // 如果使用选项1
	// #endif

	export default {
		name: 'VideoFullscreenModal',
		// #ifdef APP-PLUS || H5
		components: {
			DomVideoPlayer
		}, // 如果使用选项1
		// #endif
		props: {
			visible: { // 控制弹窗是否显示
				type: Boolean,
				default: false,
			},
			videoSrc: { // 要播放的视频URL
				type: String,
				default: '',
			},
		},
		data() {
			return {
				touchStartX: 0,
				touchEndX: 0,
				swipeThreshold: 100 // 滑动阈值，可根据需要调整
			}
		},
		watch: {
			visible(newVal) {
				if (newVal && this.videoSrc) {
					this.$nextTick(() => {
						// 选项1 (DomVideoPlayer)
						if (this.$refs.modalPlayer && typeof this.$refs.modalPlayer.play === 'function') {
							this.$refs.modalPlayer.play();
						}
						// 选项2 (原生 video)
						// if (this.$refs.modalPlayerNative) {
						// 	this.$refs.modalPlayerNative.play();
						// }
					});
				} else {
					// 选项1 (DomVideoPlayer)
					if (this.$refs.modalPlayer && typeof this.$refs.modalPlayer.pause === 'function') {
						this.$refs.modalPlayer.pause();
					}
					// 选项2 (原生 video)
					// if (this.$refs.modalPlayerNative) {
					// 	this.$refs.modalPlayerNative.pause();
					// }
				}
			}
		},
		onBackPress(options) {
			if (options.from === 'backbutton' && this.showPublishPopup) {
				this.showPublishPopup = false;
				return true;
			}

			return false;
		},
		methods: {
			closeModal() {
				this.$emit('close'); // 通知父组件关闭弹窗
			},
			handleNativeExit() {
				// 如果DomVideoPlayer内部退出了它自己的“全屏”（如果它有独立于浏览器的全屏状态）
				// 或者它不知何故仍然触发了原生退出，我们确保我们的模态框关闭。
				// 如果不再调用DomVideoPlayer.fullScreen()，这可能不是严格必需的。
				this.closeModal();
			},
			handleTouchStart(event) {
				this.touchStartX = event.touches[0].clientX;
			},
			handleTouchEnd(event) {
				this.touchEndX = event.changedTouches[0].clientX;
				this.handleSwipeGesture();
			},
			handleSwipeGesture() {
				const swipeDistance = this.touchEndX - this.touchStartX;

				// 检查滑动距离是否超过阈值
				if (Math.abs(swipeDistance) > this.swipeThreshold) {
					// 左右滑动关闭弹窗
					if (swipeDistance > 0) {
						// 右滑
						this.closeModal();
					} else {
						// 左滑
						this.closeModal();
					}
				}
			},

		},
	};
</script>

<style lang="scss" scoped>
	.fullscreen-modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: #000000;
		/* 黑色背景 */
		z-index: 9999;
		/* 确保在最上层 */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.video-container {
		width: 100%;
		height: 100%;
		/* 或者设置一个最大高度如 80vh 并在video上使用 object-fit: contain */
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.close-button {
		position: absolute;
		top: 20px;
		/* 根据需要调整, 考虑手机状态栏 */
		right: 20px;
		padding: 10px;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 50%;
		cursor: pointer;
		z-index: 10000;
		/* 在视频控制条之上 */
	}
</style>